<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>著名景点</title>
    <link href="css/css.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
    <header>
        <div class="head_c">
            <!--头部-->
            <div class="top">
                <div class="top_left">欢迎光临悠游行！</div>
                <div class="top_right" style="display: flex;" id="login_signup_area">
                    <div class="top_right"><a href="login.html">登录</a><a href="zhuce.html">注册</a></div>
                </div>
                <div class="top_right" style="display: flex;" id="logout_area">
                    <a class="top_right" id="login_info" style="font-weight: bold;">用户：15159241643</a>
                    <div class="top_right logout_button" onclick="logout()">退出登录</div>
                </div>
            </div>
        </div>
    </header>

    <!--导航-->
    <nav>
        <ul>
            <li><a href="index.html">网站首页</a></li>
            <li class="on"><a href="jingdian.html">著名景点</a></li>
            <li><a href="luxian.html">推荐路线</a></li>
            <li><a href="jiudian.html">酒店入住</a></li>
            <li><a href="luntan.html">论坛热帖</a></li>
        </ul>
    </nav>

    <!--banner-->
    <div class="banner"></div>
    <div class="jingdian">
        <div class="jingdian_tittle">著名景点</div>
        <div class="jingdian_list">
            <div class="left_button" id="left_button" onclick="display_prev_page()">
                <span class="iconfont" style="margin: 0 auto; font-size: 40px;">&#xe660;</span>
            </div>
            <div class="right_button" id="right_button" onclick="display_next_page()">
                <span class="iconfont" style="margin: 0 auto; font-size: 40px;">&#xe65f;</span>
            </div>
            <div class="jingdian_left">

            </div>
            <div class="jingdian_right">
                <ul id="right_list">

                </ul>
            </div>
        </div>
    </div>

    <div class="modal-wrapper hidden" id="float_area">
        <div class="modal">
            <h2 style="width:100%; text-align:center; line-height:40px;" id="text_float"></h2>
            <button style="margin: 25px auto 0px auto; justify-self: center;" id="text_float_close"
                onclick="float_area_close()">关闭</button>
        </div>
    </div>


    <div class="modal-wrapper float_window" id="float_window">
    </div>

    <footer>悠游行</footer>
</body>

</html>

<script src="./js/utils.js"></script>
<script>
    now_page = 1;
    display_login_info();
    display_now_page();
    function select_spot(id) {
        setCookie("selected_spot_id", id);
        window.location.href = "jingdian-jieshao.html";
    }

    function delete_spot_tip(id, name) {
        float_window(
            `<div class="modal">
            <h2 style="width:100%; text-align:center; line-height:40px;" id="text_float">确认删除景点【${name}】？</h2>
            <button style="margin: 25px auto 0px auto; justify-self: center;" id="text_float_close"
                onclick="delete_spot(${id})">确认</button>
              <br>
            <button style="margin: 25px auto 0px auto; justify-self: center;" id="text_float_close"
                onclick="hide_float_window()">取消</button>
            </div>
      `
        );
    }

    async function delete_spot(id) {
        api = baseUrl2 + `/spots/delete?id=${id}`;
        await fetch(api, {
            method: "DELETE",
            headers: {
                Authorization: getCookieValue("token"),
            },
        }).then(response => response.json())
            .then(data => {
                console.log(data);
                if (data["code"] == 200) {
                    hide_float_window();
                    display_now_page();
                    show_float_text("删除成功");
                } else {
                    show_float_text("删除失败");
                    hide_float_window();
                }
            }).catch(error => {
                console.error(error);
                hide_float_window();
            })
    }

    function display_now_page() {
        api = baseUrl2 + `/spots/page?current=${now_page}`;
        fetch(api, {
            method: "GET",
            headers: {
                "Content-Type": "application/json"
            }
        }).then(response => response.json())
            .then(data => {
                console.log(data);
                list = data["data"];
                if (list.length === 0 && now_page > 1) {
                    display_prev_page();
                    return;
                }
                left_table = document.querySelector(".jingdian_left");
                left_table.style["list-style-type"] = "none";
                right_table = document.querySelector("#right_list");
                left_table.innerHTML = "";
                right_table.innerHTML = "";
                item = list[0];
                left_table.innerHTML = `
                <li class="${isAdmin() ? "delete_button_parent" : ""}">
                    <button class="float_small_button" onclick="delete_spot_tip(${item.id},'${item.title}')">删除</button>
                    <div>
                        <div class="hover_color_change" onclick="select_spot(${item.id})">
                            <img src="${item.image}" style="width:560px; height:290px;" alt="" />
                            <span>${item.title}</span>    
                        </div>
                        <p>${item.description}</p>   
                    </div> 
                </li>
                `;
                for (var i = 1; i < list.length; i++) {
                    item = list[i];
                    right_table.innerHTML += `
                    <li class="delete_button_parent">
                        <button class="float_small_button" onclick="delete_spot_tip(${item.id},'${item.title}')">删除</button>
                        <div style="hover_color_change" onclick="select_spot(${item.id})">
                            <img src="${item.image}" style="width:291px;height:171px;" alt="" />
                            <p>${item.title}</p>
                        </div>
                    </li>
                    `;
                }
            }).catch(error => {
                console.error(error);
                show_float_text("获取景点数据异常");
            })
    }

    function display_prev_page() {
        if (now_page > 1) now_page--;
        display_now_page();
    }

    function display_next_page() {
        now_page++;
        display_now_page();
    }

</script>